<template>
    <el-menu class="my-route-menu" :mode="props.mode" :default-active="props.defaultActive">
        <template v-for="menu in menuList" :key="menu.index">
            <el-menu-item :index="menu.index" @click="goToRoute(menu.index)">
                <el-icon v-if="menu?.icon" :size="16">
                    <my-icon :name="menu.icon"></my-icon>
                </el-icon>
                <span>{{ menu.title }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
import type { RouteMenuProps, RouteMenuItemData } from './props';
const props = withDefaults(defineProps<RouteMenuProps>(), {
    route: '',
    data() {
        return [];
    },
});

const router = useRouter();

const menuList = computed<RouteMenuItemData[]>(() => {
    if (props.route) {
        const route = router.getRoutes().find((item) => item.path === props.route || item.name === props.route);
        if (route?.children) {
            return route.children
                .filter((r) => !r?.meta?.isHideMenu)
                .map((r) => {
                    return {
                        index: r.name,
                        title: r?.meta?.title || (r.name as string) || '',
                        icon: r?.meta?.icon || '',
                    } as RouteMenuItemData;
                });
        } else {
            return [];
        }
    } else {
        return props.data;
    }
});

const goToRoute = (routeName: string) => {
    router.push({ name: routeName });
};
</script>

<style scoped></style>
